<script setup>
import {ref} from "vue";
import {useStudyRoomStore} from "@/stores/index.js";
const store = useStudyRoomStore()

//控制教师选中
const teacherStatus = ref([
  true,
  false,
  false,
]);
const selectTeacher = (num) => {
  teacherStatus.value = [false,false,false];
  teacherStatus.value[num] = true;
};
//控制组件开关
const closeWidget = () => {
  store.widgetSwitch.teacher = false;
};
//绑定表单数据
const formData = ref("");

//渲染的聊天记录
const renderedTalkList = ref([
  {
    content: "用求根公式就可以了",
    status: 0,
  },
  {
    content: "还有69页的练习题别忘了写",
    status: 0,
  },
  {
    content: "好的",
    status: 1,
  },
]);

//处理点击事件，发送问题
const postQuestion = () => {
  console.log(formData.value)
  renderedTalkList.value.push({
    content: formData.value,
    status: 1,
  });
  formData.value = "";
};
</script>

<template>
<div class="teacher">
  <div class="t-head">

    <div class="t-h-left">
      <div class="t-h-item" @click="selectTeacher(0)">
        <img src="@/assets/img/avatar1.png" alt="" class="avatarA" :class="{active:teacherStatus[0]} "/>
        <div class="name">高数王老师</div>
      </div>

      <div class="t-h-item" @click="selectTeacher(1)" >
        <img src="@/assets/img/avatar2.png" alt="" class="avatar" :class="{active:teacherStatus[1]}"/>
        <div class="name">java白老师</div>
      </div>

      <div class="t-h-item" @click="selectTeacher(2)">
        <img src="@/assets/img/avatar3.png" alt="" class="avatar" :class="{active:teacherStatus[2]}"/>
        <div class="name">数据库高老师</div>
      </div>

      <div class="t-h-item">
        <img src="@/assets/img/avatar7.png" alt="" class="avatar" />
        <div class="add">添加</div>
      </div>


    </div>

    <div class="t-h-right">
      <span class="two-icon">
        <img src="../../assets/icon/StudyRoom/smile.png" alt="" class="icon1" />
        <img src="../../assets/icon/StudyRoom/exit.png" alt="" class="icon2" @click="closeWidget"/>
      </span>
    </div>
  </div>

  <div class="t-box">
    <div class="talks" v-for="item in renderedTalkList">
      <!--  这是AI的回答  -->
      <div v-if="item.status === 0" class="talk-bar1">{{ item.content }}</div>

      <!--  这是用户的问题  -->
      <div v-if="item.status === 1" class="talk-bar2">{{ item.content }}</div>
    </div>
  </div>

  <div class="t-input">
    <textarea class="t-i-input" v-model="formData"></textarea>
    <a class="t-i-put">
      <img src="@/assets/icon/StudyRoom/teacherInput1.png" class="t-i-p-icon" alt="">
      <img src="@/assets/icon/StudyRoom/teacherInput2.png" class="t-i-p-icon" alt="" @click="postQuestion">
    </a>
  </div>
</div>
</template>

<style scoped lang="scss">
.teacher{
  position: fixed;
  left: calc(50% - 390px);
  top: calc(50% - 300px);
  width: 820px;
  height: 600px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  .t-head{
    width: 100%;
    height: 90px;
    background: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    justify-items: flex-start;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    .t-h-left{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;
      .t-h-item{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        .avatar,.avatarA {
          width: 45px;
          height: 45px;
          border-radius: 50%;
        }
        .active{
          box-shadow: 0 0 0 3px rgba(133, 137, 255, 1), 0 0 0 5px rgba(133, 137, 255, 0.6), 0 0 0 7px rgba(133, 137, 255, 0.4);
        }
        .name,.add {
          font-size: 14px;
          color: #000;
        }
        .add{
          color: #aaaaaa;
        }
      }
    }
    .t-h-right{
      .two-icon {
        width: 55px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 15px;
        .icon1,
        .icon2 {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .t-box{
    width: 96%;
    height: calc(100% - 180px);
    margin: 0 auto 10px;
    overflow: auto;
    .talks {
      margin-top: 10px;
      .talk-bar1 {
        float: left;
        clear: both;
        max-width: 1080px;
        padding: 8px 20px;
        background: rgba(255, 255, 255, 1);
        color: rgba(51, 51, 51, 1);
        letter-spacing: 1px;
        border-radius: 0 30px 30px 30px;
        margin-left: 10px;
        box-shadow: 0 5px 15px rgba(201, 201, 201, 0.2);
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 10px;
      }
      .talk-bar2 {
        width: fit-content;
        max-width: 800px;
        float: right;
        clear: both;
        padding: 8px 20px;
        background: linear-gradient(270deg, rgba(198, 173, 255, 0.2) 0%, rgba(102, 170, 237, 0.2) 100%);
        letter-spacing: 1px;
        border-radius: 30px 0 30px 30px;
        margin-right: 10px;
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
  }
  .t-input{
    margin: 0 auto;
    width: 90%;
    height: 68px;
    border-radius: 25px;
    border: 1.5px solid rgba(138, 174, 235, 1);
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
    padding-left: 18px;
    .t-i-input{
      width: 80%;
      height: 98%;
      border: none;
      resize: none;
      overflow: auto;
      font-size: 15px;
      padding-top: 9px;
      letter-spacing: 1px;
      &:focus {
        outline: none;
      }
    }
    .t-i-put{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      .t-i-p-icon{
        width: 44px;
        height: 44px;
      }
    }
  }
}
</style>
